.Tab.Tab__block {
  display: grid;
  grid-auto-flow: column;
  font-size: var(--font-sm);
  border-radius: 3px;
  overflow: hidden;
  color: var(--color-gray-300);
  background: linear-gradient(
    90deg,
    var(--color-cold-blue-900) 0%,
    color-mix(in srgb, var(--color-slate-500) 40%, transparent) 100%
  );
  box-shadow: inset 0px 0px 30px 5px rgba(255, 255, 255, 0.01);
}

.Tab-option-icon {
  margin-right: 0.465rem;
  opacity: 0.7;
}

.Tab.Tab__block .Tab-option {
  text-align: center;
  padding: 0.8rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  cursor: pointer;
}

.Tab.Tab__block .Tab-option:hover {
  color: var(--color-white);
  background: var(--color-cold-blue-700);
}

.Tab.Tab__block .Tab-option.active {
  opacity: 1;
  pointer-events: none;
  background: var(--primary-btn-bg);
  color: var(--color-white);
}

.Tab.Tab__block .Tab-option.active .Tab-option-icon {
  opacity: 1;
}

.Tab.Tab__inline {
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

.Tab.Tab__inline::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.Tab.Tab__inline .Tab-option {
  cursor: pointer;
  display: inline-block;
  margin-right: 1.5rem;
  font-size: var(--font-base);
}

.Tab.Tab__inline .Tab-option:hover {
  opacity: 0.8;
}

.Tab.Tab__inline .Tab-option.active {
  opacity: 1;
  pointer-events: none;
}
